<template lang="pug">
  div
    el-row
      el-col(:span="24" v-loading="loading")
        .header-box
          .headImgBox
            el-avatar(:size="100" :src="info.headUrl || defaultImg")
          .info
            h2
              | {{info.childName}}
              el-tag.ml5(v-if="info.status" size="medium" effect="dark" :type="info.status | stautsFilter('type')") {{info.status | stautsFilter('name')}}
            p
              span.mr20
                i.mr5(class="iconfont icon-jiating_baba c_secondary")
                | {{info.relationship}}：
                b {{info.name}}
              span
                i.mr5(class="iconfont icon-zerenren c_secondary")
                | 负责人：
                b {{info.staffName}}
          .btnGroups
            el-button(size="large" round plain @click="() => modalHandle('clueFollow')") 跟进
            el-button(size="large" round plain v-if="info.status" @click="() => modalHandle('toClient')") 转成客户
            el-button(size="large" round plain @click="() => modalHandle('clueTransfer')") 移交
            //- el-button(size="large" round plain @click="disabled = false") 编辑
            el-button.gradientVertical(size="large" round @click="deleteHandle") 删除
      el-col(:span="24")
        el-divider
        el-row(:gutter="20")
          el-col(:span="15")
            .drawer-content(v-loading="loading")
              clue-form(ref="clueForm" inType="clue" :info="info" :disabled="disabled")
            .drawer-footer.tr
              el-button.gradientVertical(v-if="!disabled" size="large" round :loading="submitting" @click="submitHandle") 确定
          el-col(:span="9")
            follow-list(ref="followList" :id="id" paramsKey="leadsId" type="leadsHistory")
            //- el-tab-pane(label="附件" name="attachment")
            //-   attachment(:query="{leadsId: id}")
    clueTransfer(:visible.sync="modalObj.clueTransferVisible" :id="id" :info="info" @getInfo="getInfo" type="clue")
    clueFollow(:visible.sync="modalObj.clueFollowVisible" :id="id" :info="info" @getInfo="getInfo" type="clue")
    toClient(:visible.sync="modalObj.toClientVisible" :id="id" :info="info" @getInfo="getInfo" type="clue")
    //- template(v-if="modalObj.component")
    //-   components(:is="modalObj.component" :visible.sync="modalObj.visible" :id="id" :info="info" @getInfo="getInfo" type="clue")
</template>
<script>
import AImage from '@/components/Basic/Image'
import { pagerMixin } from '@/mixins'
import defaultImg from '@/assets/TX2.png'
import { getClueInfo, clueDelete, clueSubmit } from '../../api'
import { statusList } from './config'
import ClueForm from '../../components/clueForm'
import Attachment from '../../components/attachment'
import ClueTransfer from '../../components/transfer'
import ClueFollow from '../../components/clueFollow'
import ToClient from '../../components/toClient'
import FollowList from '../../components/followList'

export default {
  components: {
    AImage,
    ClueForm,
    Attachment,
    clueTransfer: ClueTransfer,
    clueFollow: ClueFollow,
    toClient: ToClient,
    FollowList
  },
  filters: {
    stautsFilter (val, key) {
      if (!val) {
        return key === 'name' ? '其他' : 'info'
      }
      const status = statusList.find(x => x.id === val?.toString()) || {}
      return status[key] || ''
    }
  },
  mixins: [pagerMixin],
  data () {
    return {
      defaultImg,
      loading: false,
      submitting: false,
      activeTab: 'detail',
      info: {},
      disabled: false,
      history: [],
      modalObj: {
        clueFollowVisible: false,
        toClientVisible: false,
        clueTransferVisible: false
      }
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    strToArray (val) {
      return val ? val.split(',') : []
    },
    // 获取详情
    getInfo () {
      const { id } = this
      if (id) {
        this.loading = true
        getClueInfo({ leadsId: id }).then(res => {
          this.info = res?.leads || {}
        }).finally(() => {
          this.loading = false
        })
        this.$refs.followList && this.$refs.followList.getLeadsHistory()
      }
    },
    // 移交
    modalHandle (type) {
      this.modalObj = {
        [`${type}Visible`]: true
      }
    },
    // 删除
    deleteHandle () {
      const { id } = this
      this.$confirm('确认要删除该条线索?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clueDelete({ leadsId: id }).then(() => {
          this.$message.success('删除成功')
          this.$router.go(-1)
        })
      })
    },
    // 编辑
    async submitHandle () {
      const values = await this.$refs.clueForm.submitHandle()
      this.submitting = true
      clueSubmit({
        id: this.id,
        ...values
      }, !!this.id).then(() => {
        this.$message.success('提交成功')
        this.getInfo()
        this.disabled = true
      }).finally(() => {
        this.submitting = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.header-box{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;

  .headImgBox{
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #FFFFFF;
    box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
  }

  .info {
    h2 {
      font-size: 22px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin: 0 20px 15px 0;

      ::v-deep{
        .el-tag {
          font-weight: normal;
          font-size: 15px;
          height: 25px;
          line-height: 25px;
          border: none;
          background: #2DB7F5;
          border-radius: 3px;
        }
      }
    }

    > p {
      font-size: 15px;
      font-family: PingFang SC;
      ;
      color: #666666;

      b {
        margin-left: 5px;
      }
    }
  }

  .btnGroups{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

</style>
